<template>
  <div class="log-content">
    <pui-drawer position="bottom" ref="messageDrawer" header :show="mainRef.showDrawer">
      <template #header>
        <div class="drawer-header">
          <div class="_left">
            <span class="title">运行日志</span>
            <!-- <pui-selector v-model="mainRef.selectedLog" :dataList="mainRef.logOptions"></pui-selector> -->
          </div>
          <div class="_right">
            <pui-icon name="search"></pui-icon>
            <pui-icon name="save"></pui-icon>
          </div>
        </div>
      </template>
      <div class="drawer-content">
        <div class="message-list">
          <!-- <div :class="['message-item', item.type]" v-for="(item, i) in messageListFilter()" :key="i">{{item.text}}</div> -->
          <div :class="['message-item', 'success']" v-for="(item, i) in mainRef.messageLogList" :key="i">{{item}}</div>
        </div>
      </div>
    </pui-drawer>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'message-log'
})
</script>
<script lang="ts" setup>
import { reactive, watch, nextTick, getCurrentInstance } from 'vue'
import { engineManager } from '@/services/phot_client/engine'
import { graphManager } from '@/services/phot_client/graph'
const { proxy } = getCurrentInstance() as any
watch([() => engineManager.messageLog], (v1) => {
  console.log(v1)
})
const mainRef = reactive({
  selectedLog: '0',
  showDrawer: false,
  logOptions: [
    {
      label: '全部',
      value: '0'
    },
    {
      label: '警告',
      value: '1'
    },
    {
      label: '错误',
      value: '2'
    },
    {
      label: '成功',
      value: '3'
    },
  ],
  messageLogList: [] as any
})
// const messageListFilter = () => {
//   const list = mainRef.selectedLog === '1' ? mainRef.messageLogList.filter(item => item.type === 'warn') :
//   mainRef.selectedLog === '2' ? mainRef.messageLogList.filter(item => item.type === 'error') :
//   mainRef.selectedLog === '3' ? mainRef.messageLogList.filter(item => item.type === 'success') : mainRef.messageLogList
//   return list
// }
const init = async (log?: any) => {
  await nextTick()
  proxy.$refs.messageDrawer.componentRef.show = true
  // engineManager.messageLog.push(`[${graphManager.graphName}] - 任务启动...`)
  mainRef.showDrawer = true
  if (!log) {
    mainRef.messageLogList.push(`【${graphManager.graphName}】 - 任务启动...`)
  } else {
    mainRef.messageLogList = mainRef.messageLogList.concat(log)
  }
  // setTimeout(() => {
  //   mainRef.messageLogList = mainRef.messageLogList.concat(engineManager.messageLog)
  // }, 500)
}
const clearLog = () => {
  mainRef.messageLogList = []
}
const concatLog = (msg?: string) => {
  mainRef.messageLogList = mainRef.messageLogList.concat(msg ? msg : engineManager.messageLog)
}
defineExpose({
  init,
  concatLog,
  clearLog
})
</script>